<template>
  <div class="app-container">
      <!-- 策略的分配信息 -->
    <div class="cqt-box-item">
        <h3>策略基本信息<el-button type="text" v-if="userShow" @click="userShow = false">隐藏</el-button><el-button type="text" v-else @click="userShow = true">显示</el-button></h3>
        <el-table
            :data="allUserInfo"
            border
            stripe
            v-show="userShow"
            style="width:100%">
            <el-table-column
                prop="id"
                label="用户ID"
                align="center"
                width="180">
            </el-table-column>
            <el-table-column
                prop="name"
                label="用户名"
                align="center"
                width="180">
            </el-table-column>
            <el-table-column
                prop="level"
                align="center"
                label="操作级别">
            </el-table-column>

            <el-table-column
                label="操作"
                align="center">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="handleEditStrategyLevel(scope.$index, scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>

          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="requestData.currentPage"
            :page-sizes="[50, 100, 150, 200]"
            :page-size="requestData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="logTotal">
        </el-pagination>

    </div>


        <!-- 对应用户权限编辑 -->
    <el-dialog title="用户权限编辑" :visible.sync="dialogStrategyFormVisible">
        <el-form :model="userStrategyForm">
            <el-form-item label="用户id" label-width="120px">
                <el-input v-model="userStrategyForm.id" auto-complete="off" disabled></el-input>
            </el-form-item>

             <el-form-item label="用户名" label-width="120px">
                <el-input v-model="userStrategyForm.name" auto-complete="off" disabled></el-input>
            </el-form-item>

             <el-form-item label="用户权限" label-width="120px">
              <el-checkbox-group 
                  :min="0"
                  :max="1"
                  v-model="EditUserRole">
                  <el-checkbox v-for="city in cities" :label="city.key" :key="city.key" >{{city.value}}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogStrategyFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitUserStrategyInfo">确 定</el-button>
        </div>
    </el-dialog>
     
  </div>
</template>

<script>
import { getAllUserInfo, submitUserStrategyInfo } from "@/api/user";
const cityOptions = [
  { key: 1, value: "创建者" },
  { key: 2, value: "可编辑策略" },
  { key: 3, value: "仅可查看策略" },
  { key: 4, value: "无权" }
];
export default {
  data() {
    return {
      EditUserRole: [],
      userShow: true,
      cities: cityOptions,
      //策略ID
      strategyId: null,
      dialogStrategyFormVisible: false,

      //所有的用户
      allUserInfo: [],

      userStrategyForm: {
        id: null,
        name: null
      },

      value: "",

      logTotal: 0,
      requestData: {
        currentPage: 1,
        pageSize: 50
      }
    };
  },

  created() {
    this.strategyId = this.$route.query.id;
    this.init();
  },
  methods: {
    init() {
      // 初始化请求
      this.loadAllUser();
    },

    /**
     * 加载所有的用户信息
     */
    loadAllUser() {
      var params = {
        currentPage: this.requestData.currentPage,
        pageSize: this.requestData.pageSize,
        strategyId: this.strategyId
      };
      getAllUserInfo(params).then(response => {
        var data = response.data;
        this.allUserInfo = data.list;
        this.logTotal = data.total;
      });
    },

    /**
     * 编辑处理器
     */
    handleEditStrategyLevel(index, row) {
      this.userStrategyForm.id = row.id;
      this.userStrategyForm.name = row.name;

      //权限的映射
      if (row.level == "创建者") {
        this.EditUserRole = [1];
      } else if (row.level == "可编辑策略") {
        this.EditUserRole = [2];
      } else if (row.level == "仅可查看策略") {
        this.EditUserRole = [3];
      } else if (row.level == "无权") {
        this.EditUserRole = [4];
      }

      this.dialogStrategyFormVisible = true;
    },

    /**
     * 更新用户和某个策略的关系
     */
    submitUserStrategyInfo() {
      var data = {
        strategyId: this.strategyId,
        userId: this.userStrategyForm.id,
        userName: this.userStrategyForm.name,
        //那第一个就好
        level: this.EditUserRole[0]
      };

      //发起提交
      submitUserStrategyInfo(data)
        .then(response => {
          this.$message("操作成功!");
          this.dialogStrategyFormVisible = false;
          this.loadAllUser()
          this.userStrategyForm = {
            id: null,
            name: null
          };

          this.EditUserRole = [];
          
        })
        .catch(err => {});
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.requestData.pageSize = val;
      this.loadUserList();
    },

    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.requestData.currentPage = val;
      this.loadUserList();
    }
  }
};
</script>

<style scoped>
.line {
  text-align: center;
}
.cqt-box-item h3 > button {
  margin-left: 20px;
}
.cell .el-tag {
  margin-left: 2px;
  margin-right: 2px;
}
.el-pagination {
  margin-top: 20px;
}
.el-table {
  margin-bottom: 60px;
}
.cqt-caption {
  font-size: 14px;
  color: #ccc;
  padding: 10px 20px;
  background-color: #f7f7f7;
  border-radius: 4px;
  margin: 0;
}
</style>
